<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Dashboard 3</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <!-- 引入Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!--引入zyp的css-->
  <link rel="stylesheet" href="css/zyp.css">
  <link rel="stylesheet" href="plugins/elementUI/index.css">

  

</head>
<!--
`body` tag options:

  Apply one or more of the following classes to to the body tag
  to get the desired effect

  * sidebar-collapse
  * sidebar-mini
-->
<body class="hold-transition sidebar-mini" style="width: 100%;">
<!-- <div class="wrapper" id="erp"> -->
  <!-- 区域管理 -->
  <div id="erp"> 
        <!-- 导航栏 -->
        <div style="background-color: white; position: relative; top: 2px;">
            <ul class="nav nav-pills nav-stacked" >
                <li><a href="#">区域管理</a></li>
                <li><a href="#">物料分类</a></li>
                <li><a href="#">品类管理</a></li>
                <li><a href="#">产品线管理</a></li>
            </ul>
        </div>
        
        
        <div style="background-color: white; height: 650px; margin-top: 15px; margin-left: 15px; margin-right: 15px; border-radius: 5px;">
            <div style="margin-left: 15px; margin-right: 15px;">
                <!-- 按钮部分-->
                <button type="button" class="btn btn-primary" style="margin-top: 7px; margin-left: 5px;" onclick="document.getElementById('addrolediv').style.display='block';">新增区域</button> 
                <!--右上角三个小图标-->
                <div class="navbar-right" style="margin-right: 5px; margin-top: 15px;">
                	<!-- 删除图标 -->
                    <button @click="delArea()" type="button" class="btn btn-default btn-xs" style="border:none;">
                    	<img src="" class="glyphicon glyphicon-trash">
                    </button>
                    &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                    <img src="" class="glyphicon glyphicon-refresh">
                    &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                    <img src="" class="glyphicon glyphicon-fullscreen">
                </div>
                <div class="navbar-form navbar-right">
                    <div class="form-group">
                        <input v-model="areaKey" type="text" class="form-control" placeholder="请输入区域名关键字">
                    </div>
                    <button type="submit" class="btn btn-default" @click="searchArea()">搜索</button>
                </div>
                <button class="button button4 navbar-right" @click="allButton()">全部</button>
                <button class="button button4 navbar-right" @click="enableButton()">启用</button>
                <button class="button button4 navbar-right" @click="disableButton()">禁用</button>
            </div>  
            <!-- 表格部分 -->
            <div style="margin-left: 15px; margin-right: 15px; margin-top: 15px; height: 510px; ">
                <table class="table table-hover">
                    <thead style="background-color: #fafafa;">
                        <tr>
                            <th>操作</th>
                            <th>区域名称</th>
                            <th>状态</th>
                            <th>添加日期</th>
                            <th>描述</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(area,key) in areas" @click="select(area.aid)">
                            <td>
                                <img class="glyphicon glyphicon-search" src="" >
                                &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                                <button @click="document.getElementById('editArea').style.display='block';editArea(area.aname,area.description)" type="button" class="btn btn-default btn-xs" style="border:none;">
                                	<img class="glyphicon glyphicon-edit" src="">
                            	</button>
                            </td>
                            <td>{{area.aname}}</td>
                            <td @click="sw(key)">
                                <el-switch
                                :value="value[key]"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                                </el-switch>   
                            </td>
                            <td>{{ area.atime }}</td>
                            <td>{{ area.description }}</td>
                        </tr>
                    </tbody>
                 </table>
            </div>
            <!-- 分页 -->
            <div class="page" id="page_div">               
                <button type="button" class="btn btn-default btn-sm" @click="upPage()">上一页</button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <label id="currentPage">{{currentPage}}</label>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" class="btn btn-default btn-sm" @click="downPage()">下一页</button>
            </div>

            <!--弹框——新增用户-->
            <div id="addrolediv">
                <div style="height: 40px;border-bottom:1px solid rgb(233, 233, 233);">
                  <div style="width: 50px;margin-left: 30px;margin-top: 20px;">
                    <p style="font-size: 15px;color: rgb(82, 82, 82);"><b>角色</b></p>
                  </div>
                  <div style="margin-left: 750px;margin-top: -40px;">
                    <button class="btn btn-default" onclick = "document.getElementById('addrolediv').style.display='none';" style="height: 30px;line-height: 10px;">x</button>
                  </div>
                </div>
                <div style="border-bottom:1px solid rgb(233, 233, 233);">
                  <div style="margin-top: 15px;margin-bottom: 20px;">
                    <span style="margin-left: 100px;">区域名称：</span>
                    <input v-model="areaName" type="text" style="margin-left: 30px;width:450px;height: 25px;" placeholder="请选择">
                  </div> 
                  <div style="margin-top: 10px;margin-bottom: 10px;">
                    <span style="margin-left: 100px;">状态：</span>
                    <span style="margin-right:70px">
                      <input v-model="areaStatus" type="radio" name="status" value="1" style="margin-right:5px">
                      	启用
                    </span>
                    <span>
                      <input v-model="areaStatus" type="radio" name="status" value="0" style="margin-right:5px">
                     	 禁用
                    </span>
                  </div>
                  <div style="margin-top: 15px;margin-bottom: 20px;">
                    <span style="margin-left: 100px;">描述：</span>
                    <input v-model="areaDescription" type="text" style="margin-left: 30px;width:450px;height: 25px;" placeholder="请选择">
                  </div>
                </div>
                <div>
                  <div style="margin-left: 600px;margin-top:15px">
                    <button @click = "document.getElementById('addrolediv').style.display='none';submit()">确认</button>
                  </div>
                </div>
              </div>
              <!--弹框——编辑弹框-->
            <div id="editArea">
                <div style="height: 40px;border-bottom:1px solid rgb(233, 233, 233);">
                  <div style="width: 50px;margin-left: 30px;margin-top: 20px;">
                    <p style="font-size: 15px;color: rgb(82, 82, 82);"><b>编辑</b></p>
                  </div>
                  <div style="margin-left: 750px;margin-top: -40px;">
                    <button class="btn btn-default" onclick = "document.getElementById('editArea').style.display='none';" style="height: 30px;line-height: 10px;">x</button>
                  </div>
                </div>
                <div style="border-bottom:1px solid rgb(233, 233, 233);">
                  <div style="margin-top: 15px;margin-bottom: 20px;">
                    <span style="margin-left: 100px;">区域名称：</span>
                    <input v-model="areaName" type="text" style="margin-left: 30px;width:450px;height: 25px;" placeholder="请选择">
                  </div>                   
                  <div style="margin-top: 15px;margin-bottom: 20px;">
                    <span style="margin-left: 100px;">描述：</span>
                    <input v-model="areaDescription" type="text" style="margin-left: 30px;width:450px;height: 25px;" placeholder="请选择">
                  </div>
                </div>
                <div>
                  <div style="margin-left: 600px;margin-top:15px">
                    <button @click = "document.getElementById('editArea').style.display='none';">确认</button>
                  </div>
                </div>
              </div>
                
        </div>
  </div>
<!-- </div> -->



<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="dist/js/adminlte.js"></script>

<!-- OPTIONAL SCRIPTS -->
<script src="plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard3.js"></script>
<!-- 引入vue -->
<script src="plugins/vue-2.6.10/vue-2.6.10/vue-resource.min.js"></script>
<script src="plugins/vue-2.6.10/vue-2.6.10/vue.js"></script>
<script src="plugins/vue-2.6.10/vue-2.6.10/axios.min.js"></script>
<!--引入ElementUi-->
<script src="plugins/elementUI/index.js"></script>
<!-- zyp的script-->
<script>
    $(function(){
       var wer = new Vue({
            el:"#erp",
            data() {
                return {
                    //switch开关
                    value: [],                  
                    areas:[],
                    //弹框数据
                    areaName:"",
                    areaStatus:"",
                    areaDescription:"",
                    //分页
                    currentPage:1,
                    totalPages:"",
                    type:2,
                    //搜索
                    areaKey:"",
                    //获取要删除的id
                    areaId:0,                 
                }
            },
            mounted(){ 
                //展示区域信息
                axios.get('area/find?page=1')
                    .then(res =>{
                        this.areas = res.data.data; 
                        this.totalPages = res.data.totalPages;
                       var val = new Array();
                       var data = res.data.data;
                       var flage;
                       for(var i=0;i<data.length;i++){
                            var s = data[i].status;
                            if (s==0) {
                                flage = true;
                            } else {
                                flage = false;
                            }
                            val.push(flage);
                       }          
                       this.value=val;   
                    })
            },
            methods: {  
                submit:function(){
                    axios.get("area/add?aname="+this.areaName+"&&status="+this.areaStatus+"&&description="+this.areaDescription)
                            .then(res =>{
                            	                        
                            })                    
                },
                //下一页
                downPage:function(){
                    if(this.currentPage==this.totalPages){
                        alert("已经是最后一页了~~")
                    }else{
                        this.currentPage++;
                    }
                    if(this.type==2){
                        axios.get("area/find?page="+this.currentPage)
                        .then(res =>{  
                            console.info(res);  
                            this.areas = res.data.data
                            var val = new Array();
                            var data = res.data.data;
                            var flage;
                            for(var i=0;i<data.length;i++){
                                    var s = data[i].status;
                                    if (s==0) {
                                        flage = true;
                                    } else {
                                        flage = false;
                                    }
                                    val.push(flage);
                            }            
                            this.value=val;
                        })
                    }else if(this.type==1){ //1 红色状态
                        axios.get('area/findAreaByStatus?status='+1+"&&page="+this.currentPage)
                        .then(res =>{  
                            console.info(res);  
                            this.areas = res.data.data
                            var val = new Array();
                            var data = res.data.data;
                            var flage;
                            for(var i=0;i<data.length;i++){
                                    var s = data[i].status;
                                    if (s==0) {
                                        flage = true;
                                    } else {
                                        flage = false;
                                    }
                                    val.push(flage);
                            }            
                            this.value=val;
                        })
                    }else if(this.type==0){ //0 绿色状态
                        axios.get('area/findAreaByStatus?status='+0+"&&page="+this.currentPage)
                        .then(res =>{  
                            console.info(res);  
                            this.areas = res.data.data
                            var val = new Array();
                            var data = res.data.data;
                            var flage;
                            for(var i=0;i<data.length;i++){
                                    var s = data[i].status;
                                    if (s==0) {
                                        flage = true;
                                    } else {
                                        flage = false;
                                    }
                                    val.push(flage);
                            }            
                            this.value=val;
                        })
                    }else if(this.type==3){ //搜索
                        axios.get('area/search?name='+this.areaKey+"&&page="+this.currentPage)
                        .then(res =>{  
                            console.info(res);  
                            this.areas = res.data.data
                            var val = new Array();
                            var data = res.data.data;
                            var flage;
                            for(var i=0;i<data.length;i++){
                                    var s = data[i].status;
                                    if (s==0) {
                                        flage = true;
                                    } else {
                                        flage = false;
                                    }
                                    val.push(flage);
                            }            
                            this.value=val;
                        })
                    }
                    
                },
                //上一页
                upPage:function(){
                    if(this.currentPage>1){
                        this.currentPage--;
                    }else{
                        alert("已经是第一页了~");
                    }
                    axios.get("area/find?page="+this.currentPage)
                        .then(res =>{
                        this.areas = res.data.data
                        this.currentPage = res.data.currentPage;
                        var val = new Array();
                       var data = res.data.data;
                       var flage;
                       for(var i=0;i<data.length;i++){

                            var s = data[i].status;
                            if (s==0) {
                                flage = true;
                            } else {
                                flage = false;
                            }
                            val.push(flage);
                       }
                       
                       this.value=val;
                    })
                },         
                //switch开关
                sw:function(key){
                    //发请求修改数据库
                    var a = this.value;
                    console.info(key);
                    if(a[key]==true){
                        axios.get("area/updateSwitch?aid="+this.areas[key].aid+"&&value="+1)// 0 true 开
                            .then(res =>{
                        })
                    }else{
                        axios.get("area/updateSwitch?aid="+this.areas[key].aid+"&&value="+0)
                            .then(res =>{ 
                     })
                    }
                    //发请求渲染到页面
                    axios.get('area/find?page='+this.currentPage)
                    .then(res =>{
                        console.info(res)
                       this.areas = res.data.data; 
                       var val = new Array();
                       var data = res.data.data;
                       var flage;
                       for(var i=0;i<data.length;i++){
                            var s = data[i].status;
                            if (s==0) {
                                flage = true;
                            } else {
                                flage = false;
                            }
                            val.push(flage);   
                       }                   
                       this.value=val;
                       console.info(this.value)              
                    })                               
                },
                //全部按钮
                allButton:function(){
                    this.type=2;
                    axios.get('area/find?page='+this.currentPage)
                    .then(res =>{
                        this.areas = res.data.data; 
                        this.totalPages = res.data.totalPages;
                       var val = new Array();
                       var data = res.data.data;
                       var flage;
                       for(var i=0;i<data.length;i++){

                            var s = data[i].status;
                            if (s==0) {
                                flage = true;
                            } else {
                                flage = false;
                            }
                            val.push(flage);
                       }          
                       this.value=val;
                    })
                },
                //启用按钮
                enableButton:function(){
                    this.type=0;
                    axios.get('area/findAreaByStatus?status='+0+"&&page="+this.currentPage)
                    .then(res =>{
                       this.areas = res.data.data; 
                       this.totalPages = res.data.totalPages;
                       var val = new Array();
                       var data = res.data.data;
                       var flage;
                       for(var i=0;i<data.length;i++){

                            var s = data[i].status;
                            if (s==0) {
                                flage = true;
                            } else {
                                flage = false;
                            }
                            val.push(flage);
                       }          
                       this.value=val;
                    })
                },
                //禁用按钮
                disableButton:function(){
                    this.type=1;
                    axios.get('area/findAreaByStatus?status='+1+"&&page="+this.currentPage)
                    .then(res =>{
                        this.areas = res.data.data; 
                        this.totalPages = res.data.totalPages;
                       var val = new Array();
                       var data = res.data.data;
                       var flage;
                       for(var i=0;i<data.length;i++){

                            var s = data[i].status;
                            if (s==0) {
                                flage = true;
                            } else {
                                flage = false;
                            }
                            val.push(flage);
                       }          
                       this.value=val;
                    })
                },
                //搜索
                searchArea:function(){
                    this.type=3;
                    axios.get('area/search?name='+this.areaKey+"&&page="+this.currentPage)
                    .then(res =>{
                       this.areas = res.data.data; 
                       this.totalPages = res.data.totalPages;
                       var val = new Array();
                       var data = res.data.data;
                       var flage;
                       for(var i=0;i<data.length;i++){

                            var s = data[i].status;
                            if (s==0) {
                                flage = true;
                            } else {
                                flage = false;
                            }
                            val.push(flage);
                       }          
                       this.value=val;
                    })
                },
                select:function(aid){
                	this.areaId=aid;
                },
              	//删除功能
                delArea:function(){              	
                	axios.get("area/delete?aid="+this.areaId+"&&page="+this.currentPage)
                	.then(res =>{
                       this.areas = res.data.data; 
                       this.totalPages = res.data.totalPages;
                       var val = new Array();
                       var data = res.data.data;
                       var flage;
                       for(var i=0;i<data.length;i++){
                            var s = data[i].status;
                            if (s==0) {
                                flage = true;
                            } else {
                                flage = false;
                            }
                            val.push(flage);
                       }          
                       this.value=val;
                    })
                }
 
            }
        });
    }) 
</script>
</body>
</html>
